<template>
  <el-input-number
    :min="min"
    controls-position="right"
    v-model="value"
    @change="handleChange"
  />
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";

defineOptions({
  name: "InputNumber",
});

const props = defineProps({
  min: {
    type: Number,
    default: 0,
  },
  modelValue: {
    type: [Number, String],
    required: true,
  },
});

const emit = defineEmits(["update:modelValue"]);

// 定义数据，收集 inputNumber 的值
const value = ref("");

const handleChange = () => {
  emit("update:modelValue", value.value + "px");
};

watch(
  () => props.modelValue,
  (newVal) => {
    value.value = newVal?.replace("px", "");
  },
  { immediate: true }
);
</script>

<style scoped lang="scss"></style>
